
import touch from "./touch";
import mixin_sticky  from "../../assets/js/mixin_sticky"; 
export default {
    props: {
        // 导航菜单是否需要滚动，如只有2或者3个的时候，就不需要滚动了，此时使用flex平分tab的宽度
        isScroll: {
            type: Boolean,
            default: true
        },
        // 根元素class 添加
        classList:{
            type:Array
            ,default(){
                return [];
            }
        },
        // 是否显示u-tabs导航
        listShow:{
            type:Boolean
            ,value: true
        },
        //需循环的标签列表
        list: {
            type: Array,
            default() {
                return [];
            }
        },
        // 当前活动tab的索引
        current: {
            type: [Number, String],
            default: 0
        },
        // 导航栏的高度和行高
        height: {
            type: [String, Number],
            default: 80
        },
        // 字体大小
        fontSize: {
            type: [String, Number],
            default: 30
        },
        // 过渡动画时长, 单位ms
        duration: {
            type: [String, Number],
            default: 0.5
        },
        // 选中项的主题颜色
        activeColor: {
            type: String,
            default: '#2979ff'
        },
        // 未选中项的颜色
        inactiveColor: {
            type: String,
            default: '#303133'
        },
        // 菜单底部移动的bar的宽度，单位rpx
        barWidth: {
            type: [String, Number],
            default: 40
        },
        // 移动bar的高度
        barHeight: {
            type: [String, Number],
            default: 6
        },
        // 单个tab的左或有内边距（左右相同）
        gutter: {
            type: [String, Number],
            default: 30
        },
        // 导航栏的背景颜色
        bgColor: {
            type: String,
            default: '#ffffff'
        },
        // 读取传入的数组对象的属性(tab名称)
        name: {
            type: String,
            default: 'name'
        },
        // 读取传入的数组对象的属性(徽标数)
        count: {
            type: String,
            default: 'count'
        },
        // 徽标数位置偏移
        offset: {
            type: Array,
            default: () => {
                return [5, 20]
            }
        },
        // 活动tab字体是否加粗
        bold: {
            type: Boolean,
            default: true
        },
        // 当前活动tab item的样式
        activeItemStyle: {
            type: Object,
            default() {
                return {}
            }
        },
        // 是否显示底部的滑块
        showBar: {
            type: Boolean,
            default: true
        },
        // 底部滑块的自定义样式
        barStyle: {
            type: Object,
            default() {
                return {}
            }
        },
        // 标签的宽度
        itemWidth: {
            type: [Number, String],
            default: 'auto'
        }
        // 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px
        , offsetTop: {
            type: [Number, String],
            default: 0
        },
        //列表中的索引值
        index: {
            type: [Number, String],
            default: ''
        },
        // 是否开启吸顶功能
        enable: {
            type: Boolean,
            default: true
        },
        // h5顶部导航栏的高度
        h5NavHeight: {
            type: [Number, String],
            default: 44
        },
        // 吸顶区域的背景颜色
        sticky_bgColor: {
            type: String,
            default: '#ffffff'
        },
        // z-index值
        zIndex: {
            type: [Number, String],
            default: ''
        }

    }
    ,mixins:[ touch  , mixin_sticky]
    , methods: {
        /* touch事件 */
        onTouchEnd(event){
            const { direction, deltaX, offsetX } = this;
            const minSwipeDistance = 50;
            if (direction === 'horizontal' && offsetX >= minSwipeDistance) {
                const index = this.getAvaiableTab(deltaX);
                if (index !== -1) {
                    // console.log(index)
                    this.change( index );
                }
            }
        }
       , getAvaiableTab(direction) {
            const { list, current } = this;
            const step = direction > 0 ? -1 : 1;
            for (let i = step; current + i < list.length && current + i >= 0; i += step) {
                const index = current + i;
                if (index >= 0 &&
                    index < list.length &&
                    list[index] ) {
                    return index;
                }
            }
            return -1;
        },
        /* swipe 切换 */
        change(changeIndex) {
            this.$emit("change", changeIndex);
        }
    },
}